<template>
  <div>
    <h4>用电详细</h4>
<!--    筛选部分-->
   <div id="retrieve">
     <CommonForm
       :form="searchForm"
       :formLabel="searchLabel"
       :formConfig="searchConfig"
     >
       <div class="buttonArea ">
         <el-button  class="searchBtn" type="primary" icon="el-icon-search" @click="searchCommit(searchForm)">检索</el-button>
         <el-button @click="resetData">重置</el-button>
       </div>
     </CommonForm>
   </div>
<!--    图形化数据-->
    <div  v-if="isShowChar"
          ref="electricChart"
         id="electricChart"
         v-loading="loading">
    </div>
    <el-empty v-else></el-empty>
  </div>

</template>

<script>
import * as echarts from 'echarts';
import CommonForm from "@/components/common/CommonForm";
import {getDegree,searchCommit} from "@/api/electricity/electricityInfo";
import {getBuildingList} from "@/api/schoolManage/buildingManage"
import Vue from "vue";

export default {
  components: {CommonForm},

  beforeMount() {
    this.getDate();
  },
  data(){
  return{
    // ---------------柱状图部分--------------
    isShowChar:true,
    loading:true,
    //校区名
    campusName:[],
    //数据类别
    series:[],
    //x轴显示
    xAxis:{},
    //自适应浏览器宽度
    clientWidth:document.body.clientWidth,

    //---------------检索部分-----------------
    //楼栋列表
    buildingList:[],
    //检索数据
    searchForm:{
      schoolCampus:'',//学校名和校区
      buildingID:'',//楼栋
      roomName:'',//房间
      year:'',//时间：年
      month:''//时间：月
    },
    searchLabel:[
      {
        model:"schoolCampus",
        type:'campusCascader',
        label:"学校/校区",
        labelWidth:'85px',
        props:{ checkStrictly: true },
      },
      {
        model: "year",
        label:'年份',
        type:"data",
        date:'year',
        format:'yyyy',
        labelWidth:'51px',
      },
      {
        model: "month",
        label:'月份',
        type:"data",
        date:'month',
        format:'MM',
      },
      {
        model:'buildingID',
        label:'楼栋',
        type:'buildingSelect',
        // options:this.$store.getters.changeBuildingList
      },
      {
        model:'roomName',
        label:'房间',
      }
    ],
    searchConfig:{
      labelWidth: "40px",
      inline: true,
      labelPosition: "left",
      rules:{
        schoolCampus:[
          {required: true,message:'学校名不能为空'}
        ],
        year:[
          {required: true,message:'年份不能为空'}
        ]
      }
    }
  }

},
  methods:{
    init(){
      //获取DOM
      let linearBarDom = echarts.getInstanceByDom(this.$refs.electricChart);
      //判断是否初始化图表
      if (!linearBarDom){linearBarDom = echarts.init(this.$refs.electricChart);}
      //echarts数据配置
      linearBarDom.setOption({
        title: {
          text: '电量统计'
        },
        tooltip: {},
        legend: {
          data: ['总电量','平均值']
        },
        xAxis: {
          data: this.xAxis
        },
        yAxis: {},
        series:this.series
      });
      //自适应窗口大小
      window.onresize = function (){
        //插件的宽度刷新
        linearBarDom.resize();
      };
      this.loading = false;
    },
    //电量统计数据预处理
    getDate() {
      getDegree().then((res)=>{
        const resData = res.data;
        if (resData.code == 200){
         this.dataProcess(resData.data);
           this.$message({
            message:'成功获取数据',
            type:'success'
          })
          return  this.isShowChar = true;
        }else {
          this.$message({
            message:'服务器内部出错',
            type:'error'
          })
          return this.isShowChar = false;
        }
      }).catch(onerror=>{
        this.$message({
          message:'网络出错，请稍后再试',
          type:'error'
        })
        return this.isShowChar = false;
      })
    },
    dataProcess(data){
      //数据处理
      let x_axis = [];
      let sum =[];
      let average = [];

     for(let key in data){
       const item = data[key];
       for (let i in item){
         x_axis.push(i)
         sum.push(item[i].sum);
         average.push(item[i].average);
       }
     }
      let series = [
        {
          name: '总电量',
          type: 'bar',
          data: sum
        },
        {
          name: '平均值',
          type: 'bar',
          data: average
        }
      ];
      //x轴
      this.xAxis = x_axis;
      //数据体
      this.series= series;
      //注入
      return  this.init();
    },
    //提交检索表单
    searchCommit(formName){
        if (formName.schoolCampus === ''){
         return  this.$message({
            type:'warning',
            message:"请选择任意学校"
          })
        }else  if (formName.year === ''){
         return  this.$message.warning({
            message:'请选择年份'
          })
        }else {
          const [schoolName,campusID] = formName.schoolCampus;
          //检索的数据
          const data = {
            campusID:campusID === undefined ? '' :campusID,//排除仅选择学校
            schoolName,
            year:formName.year,
            month: formName.month,
            buildingID: formName.buildingID
          };
          getDegree(data).then(res=>{
            const  result = res.data;
            if (result.code == 200){
                this.dataProcess(result.data);
                   this.$notify({
                  type:'success',
                  message:'已检索数据'
                })
            }else {
              return this.$notify({
                type:'error',
                message:result.message
              })
            }
          }).catch(()=>{
            return this.$notify({
              type:'error',
              message:'网络出错，请稍后再试'
            })
          })
        }
    },
    resetData(){
      //重置
      this.searchForm = this.$options.data().searchForm;
    }
  },
  watch:{
    clientWidth(oldValue,newValue){
      console.log(newValue);
    }
  }
}
</script>

<style lang="scss">
#electricChart{
  width: 100%;
  height: 500px;
}
.buttonArea{
  display: inline-block;
  position: relative;
  right: .5rem;
  button{
    margin-left: 1rem!important;
  }
}
@media screen and (min-width: 1200px){
  .buttonArea{
    float: right;
    transform: translateX(-2rem);
  }
}
@media screen and (min-width: 1057px) and (max-width:1130px ) {
  .buttonArea{
    display: flex;
    justify-content: flex-end;
  }
}
</style>

